<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/BorrowBooks.css">
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />

</head>
<body>
    <div class="all">
        <!-- 左手边菜单栏 -->
        <div class="h left_Menu_Bar Center">
            <div class="Menu_Bar Center">
                <!-- 头像 -->
                <div class="avatar">
                    <!-- 默认头像 -->
                    <h1 class="avatar_tou">管</h1>
                </div>
                <!-- 菜单 -->
                <div class="Menu Font">
                    <ul class="Center ct">
                        <li><a href="#">用户管理</a></li>
                        <li><a href="#">图书管理</a></li>
                        <li>
                            <a href="#">借阅管理</a> <button class="btn" id="btn"><i class="bx bx-chevron-down"
                                    id="arrow"></i></button>
                        </li>
                    </ul>
                </div>
            </div>
                   <!-- 下拉菜单 -->
                   <div class="box " id="dropdown">
                    <ul class="drop_down_menu Center">
                      <li><a href="./BorrowBooks.html">借阅</a></li>
                      <li><a href="BookReturn.php">归还</a> </li>
                      <li><a href="BorrowingRecord.php">记录</a> </li>
                        <!-- <li><a href="#">过期</a></li> -->
                    </ul>
                </div>
                <div  class="client"><button class="client_btn"></button>客户端</div>
        </div>

      <div class="borrow-books">
        <h1 class="title">借阅图书</h1>
        <div class="search">        
            <input type="text" placeholder="请输入编号/书名">
            <button>
                <img src="../img/搜索.png" alt="">
            </button>
        </div>
        <div class="classify">
            <ul>
                <li class="wraparound">排序：</li>
                <li class="default"><a href="">综合</a></li>
                <li><a href="">最新</a></li>
                <li><a href="">最热</a></li>
                <li><a href="">高分</a></li>
                <li><a href="">更多</a></li>
                <button><img src="../img/向下.png" alt=""></button>
            </ul>
            <ul>
                <li class="wraparound">类型：</li>
                <li class="default"><a href="">全部</a></li>
                <li><a href="">欢乐</a></li>
                <li><a href="">战争</a></li>
                <li><a href="">武侠</a></li>
                <li><a href="">更多</a></li>
                <button><img src="../img/向下.png" alt=""></button>
            </ul>
            <ul>
                <li class="wraparound">年份：</li>
                <li class="default"><a href="">2024</a></li>
                <li><a href="">2023</a></li>
                <li><a href="">2022</a></li>
                <li><a href="">2021</a></li>
                <li><a href="">更多</a></li>
                <button><img src="../img/向下.png" alt=""></button>
            </ul>

    <script>    
          // 初始化默认链接的字体颜色
          function setDefaultLinkColor() {
        document.querySelectorAll('.classify ul li.default a').forEach(function(link) {
          link.style.color = 'rgb(0,116,210)';
        });
      }
  
      // 为每个ul中的非默认链接添加点击事件
    function addClickEventToLinks() {
      document.querySelectorAll('.classify ul').forEach(function(ul) {
        ul.addEventListener('click', function(event) {
          if (event.target.tagName === 'A' && !event.target.classList.contains('default')) {
            // 阻止链接的默认行为
            event.preventDefault();

            // 移除当前ul下所有链接的 'default' 类
            ul.querySelectorAll('a').forEach(function(a) {
              a.classList.remove('default');
              a.style.color = ''; // 重置颜色
            });

            // 设置点击的链接为默认样式
            event.target.classList.add('default');
            event.target.style.color = 'rgb(0,116,210)';
          }
        });
      });
    }

    // 初始化
    setDefaultLinkColor();
    addClickEventToLinks();
    </script>

        </div>
        <div class="books">
            <div class="cover">
                <div class="book"></div>
                <ul>
                    <li>书名:</li>
                    <li>作者：</li>
                    <li>出版日期：</li>
                    <li>内容：</li>
                    <li>位置：</li>
                </ul>
            </div>
            <div class="cover">
                <div class="book"></div>
                <ul>
                    <li>书名:</li>
                    <li>作者：</li>
                    <li>出版日期：</li>
                    <li>内容：</li>
                    <li>位置：</li>
                </ul>
            </div>
            <div class="cover">
                <div class="book"></div>
                <ul>
                    <li>书名:</li>
                    <li>作者：</li>
                    <li>出版日期：</li>
                    <li>内容：</li>
                    <li>位置：</li>
                </ul>
            </div>
            <div class="cover">
                <div class="book"></div>
                <ul>
                    <li>书名:</li>
                    <li>作者：</li>
                    <li>出版日期：</li>
                    <li>内容：</li>
                    <li>位置：</li>
                </ul>
            </div>
            <div class="cover">
                <div class="book"></div>
                <ul>
                    <li>书名:</li>
                    <li>作者：</li>
                    <li>出版日期：</li>
                    <li>内容：</li>
                    <li>位置：</li>
                </ul>
            </div>
            <div class="cover">
                <div class="book"></div>
                <ul>
                    <li>书名:</li>
                    <li>作者：</li>
                    <li>出版日期：</li>
                    <li>内容：</li>
                    <li>位置：</li>
                </ul>
            </div>
            <div class="cover">
                <div class="book"></div>
                <ul>
                    <li>书名:</li>
                    <li>作者：</li>
                    <li>出版日期：</li>
                    <li>内容：</li>
                    <li>位置：</li>
                </ul>
            </div>
            <div class="cover">
                <div class="book"></div>
                <ul>
                    <li>书名:</li>
                    <li>作者：</li>
                    <li>出版日期：</li>
                    <li>内容：</li>
                    <li>位置：</li>
                </ul>
            </div>
            <div class="cover">
                <div class="book"></div>
                <ul>
                    <li>书名:</li>
                    <li>作者：</li>
                    <li>出版日期：</li>
                    <li>内容：</li>
                    <li>位置：</li>
                </ul>
            </div>
        </div>
        <div class="page-turning">
            <button class="first">1</button>
            <button class="second">2</button>
            <button class="thrid">3</button>
            <button class="fourth">下一页</button>
        </div>
      </div>
    </div>

    <script src="../js/BorrowBooks.js"></script>
</body>
</html>